<template>
 <div class='warpper'>
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for='item of swiperList' :key='item.id'>
            <img class='swiper-image' width='100%' :src='item.imgUrl' alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
 </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [{
        id: '001',
        imgUrl: 'https://source.qunarzz.com/site/images/wns/20200630_qunar_dujia_750x192_3.jpg'
      }, {
        id: '002',
        imgUrl: 'https://source.qunarzz.com/site/images/wns/20200702_qunar_dujia_banner_750x192_5.jpg'
      }
      ]
    }
  }
}

</script>

<style lang="stylus" scoped>
.warpper >>> .swiper-pagination-bullet-active
    background-color :#fff!important;
.warpper
    overflow hidden
    width 100%
    height 0%
    padding-bottom 31.25%
</style>
